﻿<cms-page-header cms-title="{{vm.role.title}}"
                 cms-parent-title="Roles"></cms-page-header>

<cms-form cms-name="mainForm"
          cms-edit-mode="vm.editMode"
          ng-submit="vm.save()"
          cms-loading="vm.formLoadState.isLoading">

    <!-- Default toolbar -->
    <cms-page-actions ng-show="!vm.editMode">

        <cms-button class="main-cta"
                    cms-text="Edit"
                    ng-if="::vm.canUpdate"
                    ng-click="vm.edit()"
                    ng-show="!vm.editMode && !vm.role.isSuperAdministrator"
                    ng-disabled="vm.globalLoadState.isLoading"></cms-button>

        <cms-button cms-text="Delete"
                    ng-if="::vm.canDelete"
                    ng-click="vm.deleteRole()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"
                    ng-show="!vm.role.roleCode"></cms-button>

    </cms-page-actions>

    <!-- Edit toolbar -->
    <cms-page-actions ng-show="vm.editMode">

        <cms-button-submit cms-text="Save"
                           ng-show="vm.editMode"
                           ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"
                           cms-loading="vm.saveLoadState.isLoading"></cms-button-submit>

        <cms-button cms-text="Cancel"
                    ng-click="vm.cancel()"
                    ng-show="vm.editMode"
                    ng-disabled="vm.globalLoadState.isLoading"></cms-button>

    </cms-page-actions>

    <!-- Scrollable content area -->
    <cms-page-body cms-content-type="form">

        <cms-form-status></cms-form-status>

        <!--MAIN-->
        <cms-form-section cms-title="Role">
            <cms-form-field-readonly cms-title="User Area"
                                     cms-model="vm.role.userArea.name"></cms-form-field-readonly>

            <cms-form-field-text cms-title="Title"
                                 cms-model="vm.command.title"
                                 cms-disabled="vm.role.isAnonymousRole"
                                 maxlength="50"
                                 required></cms-form-field-text>

        </cms-form-section>

        <cms-form-section cms-title="Permissions">

            <cms-form-field-permissions-collection cms-model="vm.command.permissions"
                                                   cms-global-load-state="vm.globalLoadState"></cms-form-field-permissions-collection>

        </cms-form-section>

    </cms-page-body>

</cms-form>